<!-- 超级节点用户页 -->
<template>

  <div class="pag" ref="pag">
    <cube-popup type="my-popup" ref="ads-active" maskClosable v-show="showAds">
      <div class="active-ct">
        <div class="content">
          <div ref="look-active-scroll" style="background:#1E213C;border-radius:6px;">
            <a @touchstart="" href="javascript:void(0);">
              <!--<img :src="activeImg" alt="" @load="refreshImg" />-->
              <img src="~assets/images/node/notice1.png" alt="" />
            </a>
          </div>
        </div>
        <div class="close">
          <h2>如有此需求请联系CVN客服辅助升级</h2>
          <p><img src="~assets/images/node/wechat.png" alt="" class="" />orge006</p>
          <img @click="closeActive" data-clipboard-text="orge006" src="~assets/images/node/btn.png" alt="" class="img-responsive center-block clipboard-btn" />
        </div>
      </div>
    </cube-popup>
    <cube-popup type="my-popup" v-show="showNotice" ref="upgradeMember" maskClosable>
        <div class="active-ct">
            <div class="upgrade-member">
                <h1 v-if="isAbleDelete">矿工 {{nickname}} 已满足删除条件，可无条件删除该矿工</h1>
                <!--<h2 v-if="isAbleDelete">可无条件删除该矿工</h2>-->
                <h2 v-if="!isAbleDelete" :class="{'unable-delete': !isAbleDelete}">矿工 {{nickname}} 未满足删除条件</h2>
                <h3 :class="{'selected': joinTimeCondition == 0}">1.矿工已加入节点超过7天；</h3>
                <h3 :class="{'selected': averageIncomeCondition == 0}">2.该矿工所有节点的平均收益，低于该超级节点旗下所有矿工节点的平均收益；</h3>
                <h3 :class="{'selected': nodeNumCondition == 0}">3.超级节点旗下节点数超过1900；</h3>
                <div class="delete-cost" v-if="!isAbleDelete">
                    <h4>如强制删除，需支付</h4>
                    <h5>{{20 * minerDepositNodeNum}}CVNT</h5>
                    <p>（20CVNT*{{minerDepositNodeNum}}个节点）</p>
                </div>
                <div class="submit-btn">
                    <span v-if="isAbleDelete" @click="confirmDelete">确认删除</span>
                    <span v-else @click="forceDelete">强制删除</span>
                    <span @click="cancel">我再想想</span>
                </div>
            </div>
        </div>
    </cube-popup>
    <div :class="{'v-cloak': isLoading}" class="pag-main">
      <div class="rule" @click="goSuperDetail">超级节点细则</div>
      <div class="t1"><i></i><i></i>超级节点邀请码<i></i><i></i></div>
      <h2>{{ nodeUser.inviteCode }}</h2>
      <div class="clipboard-btn copy-code" :data-clipboard-text="nodeUser.inviteCode" @click="copySuc">复制邀请码</div>
<!--      <div class="btns">-->
<!--        <div class="btn clipboard-btn" :data-clipboard-text="invitationTxt" @click="copySuc">复制邀请文字</div>-->
<!--        <div class="btn" @click="generate">生成邀请海报</div>-->
<!--      </div>-->
      <div class="sy-detail">
        <h5>
          <img src="~assets/images/superUser/fk.png" alt="">
          我的邀请收益
          <img src="~assets/images/superUser/fk.png" alt="">
        </h5>
        <div class="sy-list">
          <!--  20200518隐藏 <div class="sy-item">
            <p>旗下挖矿节点</p>
            <div>{{ nodeUser.nodeCount }}<span>/<i>{{ nodeUser.nodeMaxCount }}</i>个</span></div>
          </div>-->
          <!--  20200518隐藏 <div class="split"></div>-->
          <div class="sy-item">
            <p>昨日总收益</p>
            <div>{{  nodeUser.yesterdayCvnt}}<span>CVNT</span></div>
          </div>
          <div class="split"></div>
          <div class="sy-item">
            <p>累计总收益</p>
            <div>{{ nodeUser.totalCvnt }}<span>CVNT</span></div>
          </div>
        </div>
        <div class="detail-list">
          <!--<div class="invite-detail" @click="goInviteList">增加节点上限</div>-->
          <!-- 20200518隐藏  <div class="invite-detail" @click="openNoticeModal">增加节点上限</div>-->
          <div class="look-detail" @click="goSYDetail">收益明细</div>
        </div>

      </div>
      <!-- 20200518隐藏  <div class="super-node">
        <h4>加入超级节点模式</h4>
        <div class="s-s">
          <div class="s-join" v-if="verifyMode == 1" @click="openTypeModal">需审核后加入</div>
          <div class="s-join" v-if="verifyMode == 2" @click="openTypeModal">禁止任何人加入</div>
          <div class="s-miner" @click="goCheckMinerApply" :class="{newtip: nodeUser.hasNewMsg > 0}">矿工审核</div>
        </div>
      </div>-->
      <cube-loading class="list-loading" :class="{hide: !isListLoading}"></cube-loading>
      <div class="invite-list">
        <div class="invite-head">
          <div>被邀请人<br>（UID）</div>
          <div>挖矿中/已绑定<br>(节点数)</div>
          <div>7日平均贡献<br>(单节点每日收益)</div>
          <div>昨日分成<br>（CVNT）</div>
          <div>累积分成<br>（CVNT）</div>
        </div>
        <div class="invite-body" ref="inviteBody">
<!--          <div class="invite-item-wrap"  v-for="(item, index) in list" v-bind:key="item.uid" :id="item.uid"-->
<!--               @touchstart="inviteItemTouchstart($event, item.uid)" @touchmove.capture="inviteItemTouchmove($event, item.uid)"-->
<!--               @touchend="inviteItemTouchend($event, item.uid)" >-->
<!--            <div class="invite-item" :class="{'remove': canRemoveItem(item), 'top': item.status == 2}" @click="openRemoveDialog(item)">-->
<!--              <div class="invite-name">-->
<!--                <div>{{ item.nickname }}</div>-->
<!--                <p>UID:{{ item.uid }}</p>-->
<!--              </div>-->
<!--              <div class="invite-tnum">{{  item.miningNodeNum }}<span  class="m-size" v-if="item.nodeNum">/{{  item.nodeNum }}</span></div>-->
<!--              <div class="invite-ynum">{{ item.incomeAbility | numAddSepFixed2 }}</div>-->
<!--              <div class="invite-tnum">{{ item.yesterdayCvnt }}</div>-->
<!--              <div class="invite-ynum">{{ item.totalCvnt }}</div>-->
<!--            </div>-->
<!--            <div class="invite-item-action">-->
<!--              <div class="action-settop" @click="putMinerOnTop(item)">{{ item.status == 2 ? '取消置顶' : '置顶'}}</div>-->
<!--              <div class="action-remove" @click.prevent.stop="openDeleteModal(item.uid, item.nickname, index, list)">删除矿工</div>-->
<!--            </div>-->
<!--          </div>-->
          <slide-item v-for="(item, index) in list" v-bind:key="item.uid" :ref="item.uid">
            <div class="invite-item" :class="{'remove': canRemoveItem(item), 'top': item.status == 2}" @click="openRemoveDialog(item)">
              <div class="invite-name">
                <div>{{ item.nickname }}</div>
                <p>UID:{{ item.uid }}</p>
              </div>
              <div class="invite-tnum">{{  item.miningNodeNum }}<span  class="m-size" v-if="item.nodeNum">/{{  item.nodeNum }}</span></div>
              <div class="invite-ynum">{{ item.incomeAbility | numAddSepFixed2 }}</div>
              <div class="invite-tnum">{{ item.yesterdayCvnt }}</div>
              <div class="invite-ynum">{{ item.totalCvnt }}</div>
            </div>
            <template v-slot:action>
              <div class="invite-item-action">
                <div class="action-settop" @click="putMinerOnTop(item)">{{ item.status == 2 ? '取消置顶' : '置顶'}}</div>
                <div class="action-remove" @click.prevent.stop="openDeleteModal(item.uid, item.nickname, index, list)">删除矿工</div>
              </div>
            </template>
          </slide-item>
        </div>
      </div>
      <div id="invite-list-footer"></div>
    </div>
    <div class="mask1" v-show="showMask1" @click="closeMask1($event)" @touchmove.prevent>
        <div ref="maskContent1">
            <transition name="fade">
                <div class="general-height type-check" v-if="showCheckType">
                  <h3 class="title">加入超级节点审核模式</h3>
                  <div class="type-check-content">
                    <p @click="chooseCheckType(1)" :class="{'selected': verifyMode == 1}">需审核后加入</p>
                    <p @click="chooseCheckType(2)" :class="{'selected': verifyMode == 2}">禁止任何人加入</p>
                  </div>
                </div>
            </transition>
        </div>
    </div>
    <div class="mask" v-show="showMask" @click="closeMask($event)" @touchmove.prevent>
        <div ref="maskContent">
            <div class="general-height pay-password" v-if="showPay">
                <h3 class="title">请输入支付密码完成支付</h3>
                <div class="password-wrapper">
                    <span><strong v-if="password.num1 >= 0"></strong></span>
                    <span><strong v-if="password.num2 >= 0"></strong></span>
                    <span><strong v-if="password.num3 >= 0"></strong></span>
                    <span><strong v-if="password.num4 >= 0"></strong></span>
                    <span><strong v-if="password.num5 >= 0"></strong></span>
                    <span><strong v-if="password.num6 >= 0"></strong></span>
                </div>
                <!--<div class="forget-password" @click="getPwd">忘记密码?</div>-->
                <div class="number-group">
                    <div class="number-btn">
                        <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
                    </div>
                    <div class="number-btn">
                        <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
                    </div>
                    <div class="number-btn">
                        <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
                    </div>
                    <div class="number-btn">
                        <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
                    </div>
                </div>
                <div class="pay-loading" v-show="showPayLoading">
                    <div class="paying">
                        <img src="~assets/images/paying.gif" />
                        <span>正在支付</span>
                    </div>
                </div>
            </div>
            <transition name="fade">
                <div class="general-height id-check" :class="{'adjust-bottom': showAdjust}" v-if="showIdCheck">
                    <h3 class="title check-title">请输入短信验证码验证身份</h3>
                    <div class="check-content">
                        <p>需要通过绑定的手机 {{starPhone}}</p>
                        <p>进行身份验证以确保账户的资金安全</p>
                        <div class="sms-input">
                            <input placeholder="请输入接收到的验证码" type="number" v-model="verificationCode" /><span @click.stop.prevent="getVerifyCode" style="background:rgba(23,62,143,1);" v-if="showFlag">发送验证码</span><span v-else>重新发送 {{countdown}}s</span>
                        </div>
                        <h4 @click.stop.prevent="finishVerification" class="finish-btn" :class="{'success': verificationCode.length == 4}">完成验证</h4>
                    </div>
                </div>
            </transition>
        </div>
    </div>
  </div>

</template>

<script>
  import md5 from 'js-md5';
  import 'common/js/gt';
  import {checkAgentPayPassword, tokenGeetestInit, tokenGetCode, deleteCondition, removeMiner, updateVerifyMode } from 'api/register'
  import {getSuperNodeUser, getMinerList, setMinerTop } from 'api'   /* removeMiner */
  import bridge from 'common/js/bridge'
  import slideItem from 'cpnts/slide-item.vue'
  let translateReg = /translateX\((.*?)px\)/
  export default {
      components: {
          'slideItem': slideItem
      },
    data() {
      return {
        list: [],
        nodeUser: {},
        popupVisible: false,
        isListLoading: false,
        isLoading: false,
        invitationCode: '',
        curTab: 1,
        curRemoveItem: {},
          curMinerState: {
            isTop: null,
            deleted: false
          },
        uid: '',
        token: '',
        showAds: false,
        showNotice: false,
        isAbleDelete: false,
        nickname: '',
        showMask1: false,
        showCheckType: false,
        verifyMode: 1,
        showMask: false,
        showPay: false,
        payPassword: '',
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        },
        showPayLoading: false,
        showIdCheck: false,
        countdown: 60,
        verificationCode: '',
        area: '86',
        phone: '',
        starPhone: '',
        showFlag: true,
        u: '',
        need_code: 1,
        captchaObj: '',
        scene: 'deleteMiner',
        joinTimeCondition: 0,
        averageIncomeCondition: 0,
        nodeNumCondition: 0,
        minerDepositNodeNum: 0,
        chooseIndex: -1,
        chooseUid: '',
        showAdjust: false
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
          let query = to.query;
          Object.assign(vm, query);
          console.log(query);
          vm.phone = query.phone;
          vm.starPhone = vm.phone.substr(0, 3) + '****' + vm.phone.substr(7);
          vm.area = query.area;
          if(vm.pagScrollTop){
              vm.$refs.pag.scrollTop = vm.pagScrollTop
          }
          //vm.doNeedMiner()
          vm.getData()
      })
    },
      beforeRouteLeave (to, from, next) {
          let pag = this.$refs.pag
          this.pagScrollTop = pag.scrollTop
          next()
      },
      mounted(){
          // this.$eventBus.$on('miner.deleted', ()=>{
          //     this.curMinerState.deleted = true
          // })
          // this.$eventBus.$on('miner.setTop', (isTop)=>{
          //     this.curMinerState.isTop = isTop
          // })
          if(typeof IntersectionObserver == 'function'){
              var io = new IntersectionObserver(this.pageScrollHandle2)
              io.observe(document.getElementById('invite-list-footer'));
              this.startDt = Date.now()
          }else{
              this.$refs.pag.addEventListener('scroll', this.pageScrollHandle.bind(this))
          }


          let u = navigator.userAgent;
          this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          const h = document.body.scrollHeight;
          const H = window.innerHeight;
          // console.log(h);
          if (this.isIOS) {
            document.body.addEventListener('focusin', () => {
              this.showAdjust = true;
            })
            document.body.addEventListener('focusout', () => {
              this.showAdjust = false;
            })
          } else {
            window.onresize = function() {
              if (document.body.scrollHeight < h) {
                this.showAdjust = true;
              } else {
                this.showAdjust = false;
              }
            }
          }


          this.getRegister_ini();

    },
      computed: {
      invitationTxt(){
        return `我正在CVNT挖矿，人人影视发起的区块链项目，挖矿形式多样，收益丰厚。老铁，一起来挖矿吧，共同走上数字财富人生，更多详情可通过www.cvn.io了解。我的邀请码是${this.nodeUser.inviteCode}，你用得上哦!`
      },
      inUrl(){
        let {nodeUser} = this
        let pathname
        if(process.env.NODE_ENV == 'development'){
          pathname = '/pages/minerInvitation/index.html'
        }else{
          pathname = '/minerInvitation.html'
        }
        let nickname = encodeURIComponent(nodeUser.nickname)
        return location.origin + pathname + `?invite_code=${nodeUser.inviteCode}&nodeNickname=${nickname}`
      }
    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            setTimeout(() => {
              this.verifyPayPassword();
          }, 50);
          }
        },
        immediate: true,
        deep: true
      }
    },
    beforeDestroy() {
      let setIntervalCountdown = window['setIntervalCountdown'];
      clearInterval(setIntervalCountdown);
      window['setIntervalCountdown'] = null;
    },
    methods: {
        async putMinerOnTop(item){
            if(this.isSetMinerToping){
                return
            }
            let source = item.status == 2 ? 1 : 2
            this.curRemoveItem = item
            this.isSetMinerToping = true
            try {
                let {data} = await setMinerTop({
                    minerId: item.uid,
                    source
                })
                let isTop = source == 1 ? false : true
                let refs = this.$refs
                this.$refs[item.uid][0].inviteCollpse(()=>{
                    this.setTopAMiner(isTop)
                })
            }catch (e) {
                this.$warn(e.info)
            }
            this.isSetMinerToping = false
        },
        pageScrollHandle2(entries){
            let en = entries[0]
            let sdt = Date.now()
            if((sdt - this.startDt) < 1000){
                return
            }
            this.startDt = sdt
            if(en.intersectionRatio > 0){
                // console.log('=====================')
                // console.log(en.time)
                this.onPullup()
            }
        },
        generate(){
            //return this.$warn('暂未开放!')
            let {inUrl, nodeUser} = this
            if(!nodeUser['inviteCode']){
                return
            }
            bridge.sharePoster(JSON.stringify({
                name: nodeUser.nickname,
                code: nodeUser.inviteCode,
                url: inUrl
            }))
        },
        doNeedMiner(){
            let {curRemoveItem} = this
            if(!curRemoveItem){
                return
            }
            let {isTop, deleted} = this.curMinerState
            if(typeof isTop == "boolean"){
                this.setTopAMiner(isTop)
            }
            if(deleted){
              this.removeCurMiner()
            }
            this.curRemoveItem = null
            this.curMinerState = {
                isTop: null,
                deleted: false
            }
        },
        setTopAMiner(isTop){
            let {uid} = this.curRemoveItem
            let index = this.list.findIndex((v)=>{
                return v.uid == uid
            })
            if(isTop){
                //this.curRemoveItem.setTopTime = Date.now()
                //this.list.splice(index, 1)
                this.curRemoveItem.status = 2
                //this.list.unshift(this.curRemoveItem)
            }else{
                this.curRemoveItem.status = 1
                //this.curRemoveItem.setTopTime = null
            }
            this.list.sort((a, b)=>{
                if(a.status == b.status){
                    if(a.yesterdayCvnt == b.yesterdayCvnt){
                        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
                    }else{
                        return b.yesterdayCvnt - a.yesterdayCvnt
                    }
                }else{
                    return  b.status - a.status
                }
            })
        },
        removeCurMiner(){
            let {uid} = this.curRemoveItem
            if(!uid){
                return
            }
            let index = this.list.findIndex((v)=>{
                return v.uid == uid
            })
            let inviteBody = this.$refs.inviteBody
            let removeEl = inviteBody.children[index]
            removeEl.className = removeEl.className + ' removed'
            setTimeout(()=>{
                this.list.splice(index, 1)
            }, 1000)
        },
      async onPullup(){
        let me = this
        if(this.isListLoading){
          return
        }
        this.isListLoading = true
        if(this.list.length < 20){
          await this.getMinerList()
          this.isListLoading = false
          return
        }
        // this.list.length > 50
        let pagec = Math.floor((this.list.length - 20) / 20) + 1
        let pagey = (this.list.length - 20) % 20

        try {
          let {data} = await getMinerList({
            per: 20,
            page: 1 + pagec,
          })
          this.isListLoading = false
          if(data){
            if(pagey){
              data.splice(0, pagey)
            }
            me.list = me.list.concat(data)
          }
        }catch (e) {
          this.$warn(e.info)
          this.isListLoading = false
        }

      },
      pageScrollHandle(e){
        let {target} = e
        // console.log(e.target.scrollTop)
        // console.log(e.target.scrollHeight)
        if(e.target.scrollHeight - e.target.scrollTop <= window.innerHeight){
          this.onPullup()
        }
      },
      goSuperDetail(){
        this.$router.push({path: '/', query: {
            status: 2
          }});
      },
      goSYDetail(){
        this.$router.push({path: '/profitDetail', query: {

          }});
      },
      goInviteList(){
        this.$router.push({path: '/minerList', query: {

          }});
      },
      async removeAMiner(){
        try {
          await removeMiner({
            minerId: this.curRemoveItem.uid,
            type: 10
          })
          this.$suc('移除成功!')
          this.popupVisible = false
          let index = this.list.findIndex((v)=>{
            return v === this.curRemoveItem
          })
          this.list.splice(index, 1)
        }catch (e) {
          this.$warn(e.info)
        }
      },
      canRemoveItem(item){
            return  false
        return this.nodeUser.minerCount > 399 && item.canRemove
      },
      openRemoveDialog(item){
          this.$router.push({path: '/minerProfitDetailNew', query: {
                uid: item.uid,
                  createTime: item.createTime,
                  setTop: item.status == 2 ? true : false,
                  canRemoveMiner: this.canRemoveItem(item),
                  nickname: item.nickname,
                  maxNodeNum: item.maxNodeNum,
                  minerUid: item.uid,
                  phone: this.phone,
                  area: this.area,
                  linuxNum: item.linuxNum,
                  pcNum: item.pcNum,
                  routerNum: item.routerNum
              }});
        this.curRemoveItem = item
        // this.popupVisible = true
      },
      copySuc(){
        this.$suc('复制成功!')
      },
      getData(){
        this.getSuperNodeUser()
        this.getMinerList()
      },
      async getSuperNodeUser(){
        try {
          let {data} = await getSuperNodeUser()
          if(data){
            console.log(data);
            this.verifyMode = data.verifyMode;
            this.nodeUser = data
          }
          return data
        }catch (e) {
          this.$warn(e.info)
        }
      },
      async getMinerList() {
        try {
          let {data} = await getMinerList({
            per: 20,
            page: 1,
          })
          if (data) {
            this.list = data
          }
          return data
        } catch (e) {
          this.$warn(e.info || '请求超时')
        }
      },
      toastTip (info) {
        this.$warn(info)
      },
      closeActive() {
        /*this.$refs['ads-active'].hide();*/
        this.showAds = false;
        const toast = this.$createToast({
          txt: '客服微信号复制成功！',
          type: 'correct'
        });
        toast.show();
      },
      goCheckMinerApply() {
        this.$router.push({path: '/minerIdCheck', query: {

        }});
      },
      closeMask1(ev) {
        if (!this.$refs.maskContent1.contains(ev.target)) {
          this.showMask1 = false;
        }
      },
      openTypeModal() {
          this.showMask1 = true;
          this.showCheckType = true;
      },
      chooseCheckType(val) {
        this.verifyMode = val;
        if (this.isVerifying) {
          return;
        }
        this.isVerifying = true;
        updateVerifyMode(this.verifyMode).then((data) => {
          if (data.status && data.status == 1) {
            this.isVerifying = false;
            this.getSuperNodeUser();
            this.showMask1 = false;
            this.showCheckType = false;
            if (this.verifyMode == 1) {
              this.showToast('已修改审核模式为：需审核后加入', 'correct');
            } else if (this.verifyMode == 2) {
              this.showToast('已修改审核模式为：禁止任何人加入', 'correct');
            }
          }
        }).catch((err) => {
          this.isVerifying = false;
          this.showToast(err.info, 'warn');
        })
      },
      openNoticeModal() {
        this.showAds = true;
      },
      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showPay = false;
          this.showIdCheck = false;
          /*关闭弹框时将当前已经输入的支付密码清空*/
          this.password = {
            num1: -1,
            num2: -1,
            num3: -1,
            num4: -1,
            num5: -1,
            num6: -1
          };
          this.payPwd = '';
          this.payPassword = '';
          this.countdown = 60;
          this.cancelSetIntervalCountdown();
          this.showFlag = true;
        }
      },
      cancelSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        clearInterval(setIntervalCountdown);
        window['setIntervalCountdown'] = null;
      },
      startCountDown() {
        this.showFlag = false;
        let setIntervalCountdown = window['setIntervalCountdown'];
        if (setIntervalCountdown) {
          clearInterval(setIntervalCountdown);
          window['setIntervalCountdown'] = null;
        }
        window['setIntervalCountdown'] = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            this.cancelSetIntervalCountdown();
            this.countdown = 60;
            this.showFlag = true;
          }
        }, 1000);
      },
      verifyPayPassword() {
        this.showPayLoading = true;
        checkAgentPayPassword({uid: '', password: this.payPassword,  scene: this.scene}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
          this.u = data.data.u;
          this.need_code = data.data.need_code;
          if (this.need_code == 1) {
            setTimeout(() => {
              this.showPayLoading = false;
              this.showPay = false;
              this.showIdCheck = true;
              /* this.showMask = false; */
            }, 500);
          } else if (this.need_code == 0) {
            setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.finishVerification();
            }, 500);

          }
          /*setTimeout(() => {
            const toast = this.$createToast({
              time: 1000,
              txt: '支付密码验证成功',
              type: 'correct'
            });
            toast.show();
          }, 300);*/

          }
        }).catch((error) => {
          // console.log(error);
          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showToast(error.info, 'warn');
            }, 500)
          }
          setTimeout(() => {
            this.showPayLoading = false;
          }, 500)
        })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
      },
      finishVerification() {
        if (this.need_code == 1) {
          if (this.verificationCode == '') {
            this.showToast('请输入短信验证码', 'warn');
            return;
          }
        }
        if (this.isSubmiting) {
          return;
        }
        if (this.need_code == 1) {

        } else {
          this.verificationCode = '';
        }
        this.isSubmiting = true;
        removeMiner(this.chooseUid, this.verificationCode).then((data) => {
          // console.log(data);
          this.isSubmiting = false;
          this.list.splice(this.chooseIndex, 1);
          this.getSuperNodeUser();
          this.showToast('删除成功！', 'correct');
          this.verificationCode = '';
          this.showIdCheck = false;
          this.showMask = false;
          this.showFlag = true;
          this.cancelSetIntervalCountdown();
          this.countdown = 60;
        }).catch((err) => {
          this.isSubmiting = false;
          if (this.need_code == 0) {
            this.showMask = false;
          }
          this.showToast(err.info, 'warn');
        })
      },
      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },
      getRegister_ini() {
        // this.isGetCoding = false;
        return tokenGeetestInit().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.startGeetest(data);
          }
        })
      },
      startGeetest(data) {
        // console.log(data);
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.data.gt,
          challenge: data.data.challenge,
          offline: !data.data.success,
          product: 'bind',
          new_captcha: true
        }, (captchaObj) => {
          // console.log('111' + captchaObj)
          this.captchaObj = captchaObj;
        // captchaObj.onReady(this.captchaReady).onSuccess(this.captchaSuccess);
          captchaObj.onSuccess(this.captchaSuccess);
        })
      },
      captchaReady() {
        this.captchaObj.verify();
      },
      captchaSuccess() {
        if (this.isGetCoding) {
          return;
        }
        this.isGetCoding = true;
        let result = this.captchaObj.getValidate();

        let postData = Object.assign({
          scene: this.scene,
          area: this.area,
          mobile: this.phone
        }, result);
        tokenGetCode(postData).then((data) => {
          // console.log(data);
          this.startCountDown();
          this.isGetCoding = false;
        // this.captchaObj = null;
        }).catch((err) => {
          this.isGetCoding = false;
          this.showToast(err.info, 'warn');
        /*let me = this;
        this.showToast(err.info, 'warn');*/
        // this.captchaObj = null;
        })
      },
      getVerifyCode() {
        if (!this.captchaObj) {
          this.getRegister_ini().catch(e => {
            this.showToast(error.info, 'warn');
          })
          return;
        }
        /*if (this.isGetCoding) {
          return;
        }*/
        this.captchaObj.verify();
      },
      openDeleteModal(minerUid, nickname, index, arr) {
        if (this.isChecking) {
          return;
        }
        this.isChecking = true;
        deleteCondition(minerUid).then((data) => {
          if (data.status && data.status == 1) {
            this.isChecking = false;
            this.nickname= nickname;
            this.chooseIndex = index;
            this.chooseUid = minerUid;
            this.joinTimeCondition = data.data.joinTimeCondition;
            this.averageIncomeCondition = data.data.averageIncomeCondition;
            this.nodeNumCondition = data.data.nodeNumCondition;
            this.minerDepositNodeNum = data.data.minerNodeNum;
            if (this.joinTimeCondition == 0 || this.averageIncomeCondition == 0 || this.nodeNumCondition == 0) {
              this.isAbleDelete = false;
            }
            if (this.joinTimeCondition == 1 && this.averageIncomeCondition == 1 && this.nodeNumCondition == 1) {
              this.isAbleDelete = true;
            }
            this.showNotice = true;
          }
        }).catch((err) => {
          this.isChecking = false;
          this.showToast(err.info, 'warn');
        })
      },
      confirmDelete() {
        this.showNotice = false;
        this.need_code = 0;
        this.finishVerification();
      },
      forceDelete() {
        this.showNotice = false;
        this.showMask = true;
        this.showPay = true;
        this.starPhone = this.phone.substr(0, 3) + '****' + this.phone.substr(7);
      },
      cancel() {
        this.showNotice = false;
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    height: 100%;
    text-align: center;
    overflow-y: auto;
    background: #2E72D9;   /* 20200518增加背景色  */
  }

  .pag-main {
    background: #2E72D9 url("~assets/images/superUser/banner.png") no-repeat center top;
    background-size: 100% auto;
    padding-top: 413px;
    padding-bottom: 48px;
    position: relative;
  }

  .rule {
    z-index: 5;
    position: absolute;
    top: 22px;
    right: 0;
    width:172px;
    height:46px;
    background:rgba(103,141,197,1);
    border-radius:22px 0px 0px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #F4F5F6;
    padding-left: 5px;
  }


  .t1 {
    margin-bottom: 27px;
    font-size: 32px;
    color: #575757;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      display: inline-block;
      width:32px;
      height:2px;
      background:rgba(87,87,87,1);
      vertical-align: middle;
      &:nth-of-type(1) {
        margin-right: 4px;
      }
      &:nth-of-type(2) {
        margin-right: 24px;
      }
      &:nth-of-type(3) {
        margin-right: 4px;
        margin-left: 24px;
      }
    }
  }


  h2 {
    margin-bottom: 28px;
    font-size: 70px;
    color: #414141;
    text-align: center;
    font-weight: 600;
  }

  .copy-code {
    width:160px;
    height:40px;
    border:2px solid rgba(136,136,136,1);
    border-radius:20px;
    margin: 0 auto;
    font-size: 24px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btns {
    margin-top: 115px;
    display: flex;
    justify-content: space-between;
    padding: 0 22px;
    .btn {
      width:338px;
      height:96px;
      background:linear-gradient(0deg,rgba(253,238,217,1),rgba(223,183,119,1),rgba(253,238,217,1));
      box-shadow:0px 2px 8px 0px rgba(2,35,84,0.5);
      border-radius:48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: #5F361E;
    }
  }

  .sy-detail {
    height: 364px;
    margin: 130px 20px 0 20px;
    background: url("~assets/images/superUser/txtbg.png") no-repeat center top;
    background-size: cover;
    h5 {
      transform: translateY(-23px);
      margin: 0 auto;
      width: 330px;
      height: 66px;
      background: url("~assets/images/superUser/title.png") no-repeat center top;
      background-size: cover;
      padding: 0 38px;
      font-size: 30px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        height: 16px;
        width: 16px;
      }
    }
  }

  .sy-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    .split {
      width:2px;
      height:80px;
      background:rgba(59,35,200,1);
    }
  }

  .sy-item {
    text-align: center;
    width: 33%;
    p {
      font-size:24px;
      color:rgba(255,255,255,1);
      opacity:0.5;
      margin-bottom: 24px;
    }
    div {
      color: #FFDD69;
      font-size: 40px;
      span {
        font-size: 20px;
      }
      i {
        font-style: normal;
        color: #B198B0;
      }
    }
  }

  .detail-list {
    display: flex;
    justify-content: center;
    margin-top: 49px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      height:60px;
      background:rgba(48,36,186,1);
      opacity:0.9;
      border-radius:30px;
      color: #FEFEFE;
      font-size: 24px;
      &:nth-of-type(1) {
        width: 190px;
        margin-right: 34px;
      }

      &:nth-of-type(2) {
        width: 414px;
      }
    }
  }

  .invite-list {
    margin-top: 26px;
  }

  .invite-head {
    display: flex;
    padding: 0 30px;
    height:84px;
    background:rgba(80,136,223,1);
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 22px;
    color: #fff;
    line-height: 30px;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
    z-index: 10;
    /*> div {*/
    /*  flex: 1;*/
    /*}*/
    > div {
      &:nth-of-type(1) {
        width: 135px;
        text-align: left;

      }
      &:nth-of-type(2) {
        margin-left: -20px;
        width: 145px;
      }
      &:nth-of-type(3) {
        width: 170px;
      }
      &:nth-of-type(4) {
        width: 89px;
      }
      &:nth-of-type(5) {
        width: 89px;
      }
    }
  }

  .invite-body {
    padding: 6px 0 0 0;
    position: relative;
    z-index: 9;
    overflow-x: hidden;
  }

  .invite-item {
    min-width: 100%;
    height: 96px;
    /*border-bottom: 2px solid #5088DF;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    position: relative;
    transition: height ease 1s;
    z-index: 2;
    > div {
      //min-width: 90px;
      &:nth-of-type(1) {
        width: 135px;
        text-align: left;

      }
      &:nth-of-type(2) {
        margin-left: -20px;
        width: 145px;
      }
      &:nth-of-type(3) {
        width: 170px;
      }
      &:nth-of-type(4) {
        width: 89px;
      }
      &:nth-of-type(5) {
        width: 89px;
      }
    }
    &.top {
      &:after{
        content: '';
        height: 100%;
        width: 100vw;
        position: absolute;
        background: #2060C1;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }
    &.removed{
      overflow: hidden;
      height: 0;
      pointer-events: none;
    }
    &.remove {
      /*
      &:before{
        content: '';
        height: 24px;
        width: 24px;
        position: absolute;
        left: -29px;
        top: 50%;
        transform: translateY(-50%);
        background: url("~assets/images/node/remove.png") no-repeat center;
        background-size: contain;
      }
      */
      &:after{
        content: '';
        height: 100%;
        width: 100vw;
        position: absolute;
        background: #FE664D;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }
  }

  .invite-item-wrap {
    display: flex;
  }


  .invite-item-action {
    display: flex;
    height: 96px;
    font-size:30px;
    color:rgba(255,255,255,1);
    > div {
      height: 100%;
      width: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }


  .action-settop {
    background: #9791AD;
  }

  .action-remove {
    background: #FF5C52;
  }



  .invite-name {
    font-size: 26px;
    font-weight: normal;
    width: 100px;
    text-align: left;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    > div{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.31;
    }
    p {
      margin-top: 10px;
      font-size: 20px;
      color: #D8E1F6;
    }
  }

  .popup-ct {
    width:638px;
    height:533px;
    background:rgba(255,255,255,1);
    border-radius:8px;
    padding-top: 80px;
    font-size:28px;
    h4 {
      font-size:36px;
      font-weight:600;
      color:rgba(32,44,91,1);
      margin-bottom: 44px;
      span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 5.5em;
        vertical-align: middle;
      }
    }
    p {
      font-weight:400;
      color:rgba(113,118,140,1);
      line-height:40px;
      margin-bottom: 44px;
    }
    ul {
      list-style: none;
      padding: 0 40px;
      outline: none;
      text-align: left;
      li {
        margin-bottom: 30px;
        color:rgba(32,44,91,1);
        line-height:36px;
      }
    }
  }


  .popup-btns {
    margin-top: 55px;
    display: flex;
    justify-content: space-between;
    padding: 0 32px;
    .btn {
      width:272px;
      height:64px;
      background:rgba(23,62,143,1);
      border-radius:30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #fff;
      &.disabled {
        background:rgba(23,62,143,1);
        opacity:0.5;
        pointer-events: none;
      }
    }
  }

  .list-loading {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    &::after{
      content: '加载中..';
      display: inline;
      color: #fff;
      margin-left: 5px;
      font-size: 22px;
    }
    &.hide {
      display: none;
    }
  }

  .active-ct{
    position:relative;
    width:83vw;
    margin:0 auto;
    /*background:#1E213C;*/
    .content{
      /*background:#1E213C;*/
      /*margin:0 auto;*/
      /*width:602px;*/
      /*width:92vw;*/
      /*height:66.6vh;*/
      /*height:105.33vw;*/
      padding:32px 16px 0;
      margin-bottom:22px;
      -webkit-overflow-scrolling: touch;
      overflow:auto;
      img{
        display:block;
        width:100%;
        min-height:500px;
        height:auto;
        border-radius:6px;
      }
    }
    .close{
      position:absolute;
      z-index:9999;
      width:100%;
      bottom:160px;
      /*margin-top:-390px;*/
      cursor:pointer;
      h2{
        /*margin-top:10px;*/
        font-size:26px;
        font-weight:400;
        color:rgba(113,118,140,1);
        text-align:center;
      }
      p{
        margin-bottom:30px;
        font-size:30px;
        color:#38383E;
        text-align:center;
        img{
          width:42px;
          height:42px;
          margin-right:8px;
          margin-left:8px;
          vertical-align:middle;
        }
      }
      >img{
        width:70.2%;
      }
    }
    .upgrade-member {
      margin: 0 auto 35px;
      width: 638px;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      h1{
        margin:56px auto 16px;
        padding:0 56px;
        font-size:36px;
        font-weight:600;
        line-height: 1.5;
        color:#202C5B;
        text-align:left;
      }
      h2{
        margin-bottom:41px;
        font-size:36px;
        padding:0 56px;
        line-height: 1.5;
        text-align:left;
        font-weight:600;
        color:#202C5B;
      }
      .unable-delete{
        margin:56px auto 41px;
      }
      h3{
        // margin:0 auto 80px;
        margin-bottom:10px;
        padding:0 56px;
        /*text-align:center;*/
        font-size:28px;
        line-height:1.5;
        color:#71768C;
        text-align:left;
      }
      .selected{
        color:#DC0630;
      }
      h4{
        font-size:13px;
        text-align:center;
      }
      .delete-cost{
        margin:50px 0 -20px;
        text-align:center;
        h4{
          margin-bottom:23px;
          font-size:28px;
          color:rgba(32,44,91,1);
        }
        h5{
          margin-bottom:23px;
          font-size:40px;
          font-weight:600;
          color:rgba(32,44,91,1);
        }
        p{
          font-size:22px;
          color:rgba(113,118,140,1);
        }
      }
      .submit-btn{
        height:108px;
        line-height:108px;
        width:100%;
        font-size:0;
        margin:75px auto 0;
        border-top:1px solid #D0D4E4;
        text-align:center;
        span{
          display:inline-block;
          width:49.99999%;
          border-radius:5px;
          font-size:30px;
          color:#1253FC;
        }
        span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          /*margin-right:10px;*/
        }
      }
    }
  }

  .mask1{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);
    .general-height{
      height: 29.08vh;
      background:rgba(255,255,255,1);
    }
    .type-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .type-check-content{
      p{
        width:690px;
        height:96px;
        margin:0 auto;
        line-height:96px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(195,199,218,1);
        border-radius:10px;
        font-size:34px;
        font-weight:600;
        color:#202C5B;
        text-align:center;
        cursor:pointer;
      }
      p:first-child{
        margin:39px auto 30px;
      }
      .selected{
        background:rgba(242,252,255,1);
        border:1px solid rgba(18,83,252,1);
        color:#5872F1;
      }
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .special-height{
      height: 55.46vh!important;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          font-size:28px;
          text-align:center;
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:65px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        .number{
          margin-top:30px;
        }
      }
      .official-content{
        p{
          padding-bottom:52px;
          align-items:center;
          border-bottom:none;
        }
        .warn{
          padding:0 30px;
          line-height:1.65;
          font-size:24px;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:20px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:24px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
    .adjust-bottom{
      bottom:-15px!important;
    }
  }


  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
</style>


<style lang="scss" scoped>

  .super-node {
    margin: 12px 22px 20px 22px;
    background: url("~assets/images/node/mode.png") center center/ contain no-repeat;
    height: 204px;
    color: #5F361E;
    padding: 45px 0 0 48px;
    h4 {
      font-size:32px;
      font-weight:600;
      margin-bottom: 60px;
      text-align: left;
    }
  }

  .s-s {
    font-size: 28px;
    padding-right: 83px;
    display: flex;
    justify-content: space-between;
    > div {
      &:after {
        content: '';
        width: 14px;
        height: 24px;
        display: inline-block;
        margin-left: 15px;
        background: url("~assets/images/node/right.png") center center/ contain no-repeat;
      }
    }
  }



  .m-size {
    font-size: 20px;
  }

   /*.move-expand {*/
   /*  transition: transform .3s;*/
   /*} */

  .newtip {
    position: relative;
    &:before {
      content: '';
      width:12px;
      height:12px;
      background:rgba(255,37,37,1);
      border-radius:50%;
      position: absolute;
      top: 50%;
      left: -20px;
      margin-top: -6px;
    }
  }

</style>

<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>









